<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每一点</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .ep-form-label {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            text-align: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
            margin-right: 10px;
            width: 90%;
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container" style="border: #DEE0E1  solid 1px;margin-top: 50px;margin-bottom: 200px">
    <div class="layui-row" style="border-bottom: #DEE0E1  solid 1px;">
        <div class="layui-col-md8" style="border-right: #DEE0E1  solid 1px;">
            <h1 id="title" style="line-height: 3"></h1>
        </div>
        <div class="layui-col-md4">
            <h1><i class="layui-icon">&#xe65e;</i><span id="total"></span></h1>
            <p style="align-content: center;text-align: center">实际支付金额</p>
        </div>
    </div>
    <div class="layui-row">
        <div style="margin-left: 50%;margin-right: 50%;margin: auto;width: 200px;height: 200px;margin-top: 50px;margin-bottom: 50px">
            <img id="orderInfo" width="200px" height="200px">
        </div>
    </div>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload', "layer", 'form', 'layedit'], function () {
        var upload = layui.upload
            , layer = layui.layer
            , form = layui.form
            , layedit = layui.layedit;
        var order = [[${order}]]
        var project = [[${project}]]
        $("#title").text(project.title);
        $("#total").text(order.total);
        $("#orderInfo").attr("src","/web/order/getOrderPayQrCode?orderId="+order.id);

        window.getOrderState = function (){
            $.ajax({
                url:"/web/order/getOrderState",
                type:"post",
                data:{"orderId":order.id},
                success:function (data) {
                    console.log(data)
                    var data = data.data;
                    if(data.state == 3){
                        clearInterval(inte)
                        layer.alert('支付成功', function(index){
                            window.location.href = "/web/project_info?projectId="+project.projectId;
                            layer.close(index);
                        });
                    }
                    if(data.state == 2){
                        clearInterval(inte)
                        layer.alert('该订单已超时', function(index){

                            window.location.href = "/web/project_info?projectId="+project.projectId;
                            layer.close(index);
                        });
                    }
                    if(data.state == 4){
                        clearInterval(inte)
                        layer.alert('该订单已取消', function(index){
                            window.location.href = "/web/project_info?projectId="+project.projectId;
                            layer.close(index);
                        });
                    }
                }
            })
        }

    });

    // 确认订单状态 每三秒刷新一次
    var inte = setInterval("getOrderState()",3000);
</script>
</body>
</html>